<template>
  <div class="addressList mt50 mb50">
    <van-nav-bar fixed left-arrow @click-left="$router.back()" title="地址管理">
    </van-nav-bar>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        loading-text="loading..."
        :immediate-check="false"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-address-list
          v-model="chosenAddressId"
          :list="addressList"
          default-tag-text="默认"
          @add="onAdd"
          @edit="edit"
        />
      </van-list>
    </van-pull-refresh>
    <!-- <p image="" v-if="addressList.length === totalCount">没有更多了</p> -->
  </div>
</template>

<script>
import { ref, computed, inject, onMounted } from "vue";
import { useRouter } from "vue-router";
import { usePager } from "@/plugins/hooks";
export default {
  setup() {
    const router = useRouter();
    // 调用自定义hooks函数
    const { page, size, totalCount, finished, loading, isLoading } = usePager();

    const chosenAddressId = ref(1);
    const addressList = ref([]);

    const axios = inject("axios");
    // 获取地址列表
    const getAddressList = () => {
      const { uid } = JSON.parse(localStorage.getItem("userLoginInfo") || "{}");
      axios
        .get("/addresslist", {
          params: { page: page.value, size: size.value, uid },
        })
        .then((res) => {
          if (res.code === 200) {
            const newList = res.list.map((item) => {
              return {
                ...item,
                address: `${item.province}-${item.city}-${item.county}-${item.addressDetail}`,
              };
            });
            addressList.value = [...addressList.value, ...newList];
            setTimeout(() => {
              // 关闭loading效果
              loading.value = false;
              isLoading.value = false;
            }, 300);
            if (addressList.value.length >= totalCount.value) {
              // 所有数据都已经请求完成, 没有更多数据了
              finished.value = true;
            }
          }
        });
    };
    // 获取地址总数
    const getAddressTotal = () => {
      const { uid } = JSON.parse(localStorage.getItem("userLoginInfo") || "{}");
      axios.get("/addresstotal", { params: { uid } }).then((res) => {
        if (res.code === 200) {
          totalCount.value = res.list;
          // 请求地址列表
          getAddressList();
        }
      });
    };
    // 将原始地址列表复制一份
    const addressListCopy = computed(() => {
      return this.addressList.map((item) => {
        const tel =
          item.tel.toString().substring(0, 2) +
          "*****" +
          item.tel.toString().substring(8, 11);
        const name = item.name.substring(0, 1).padEnd(item.name.length, "*");
        return {
          ...item,
          tel,
          name,
        };
      });
    });

    const onRefresh = () => {
      // 重置数据
      finished.value = false;
      addressList.value = [];
      page.value = 1;
      // 重新请求当前页面数据
      getAddressList();
    };

    const onLoad = () => {
      setTimeout(() => {
        page.value += 1;
        getAddressList();
      }, 500);
    };

    const onAdd = () => {
      router.push("/addrAdd");
    };

    const edit = ({ id }) => {
      const index = addressList.value.findIndex((item) => item.id === id);
      router.push({
        path: "/addrAdd",
        query: { ...addressList.value[index] },
      });
    };

    onMounted(() => {
      getAddressList();
      getAddressTotal();
    });

    return {
      isLoading,
      loading,
      finished,
      // 默认选中的地址id
      chosenAddressId,
      // 地址列表
      addressList,
      // 页码
      page,
      // 每页显示数据条数
      size,
      // 数据总条数
      totalCount,
      addressListCopy,
      onRefresh,
      onLoad,
      onAdd,
      edit,
    };
  },
};
</script>

<style></style>